<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        var xmlhttp;
        try{
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {
            try {
                xmlhttp = new XMLHttpRequest();
            }catch (e) {
                try{
                    xmlhttp = new XMLHttpRequest();
                }catch (e) {
                    alert("你的浏览器不支持AJAX！");
                }
            }
        }

        function hello(){
            var url = "../HelloServlet?name=" + nm.value ;
            //回调函数
            console.log( xmlhttp.responseText);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    res.innerText = xmlhttp.responseText;
                }
            }
            //打开连接
            xmlhttp.open("get",url);
            //发生请求
            xmlhttp.send(null);
        }
    </script>
</head>
<body>
<!-- http://127.0.0.1/工程名/ajax/demo.html -->

<!-- http://127.0.0.1/工程名/HelloServlet -->
<h1>表单提交</h1>
<form action="../HelloServlet">
    名字:<input name="name">
    <button>Hello</button>
</form>

<h1>AJAX提交</h1>
<form>
    名字:<input name="name" id="nm" value="">
    <!-- button 普通按钮,  submit 提交按钮, reset 重置按钮   -->
    <button type="button" onclick="hello()">Hello</button>
</form>

<span id="res"></span>

</body>
</html>